<template>
  <div class="operate-thematic">
    <el-breadcrumb separator="/" class="bread-title">
      <el-breadcrumb-item :to="{ path: '/thematicPage' }">专题页管理</el-breadcrumb-item>
      <el-breadcrumb-item v-if="pageType==='add'">新增</el-breadcrumb-item>
      <el-breadcrumb-item v-if="pageType==='edit'">编辑</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="operate-wrapper">
      <div class="operate-page">
        <!--banner-->
        <div class="banner-wrapper" @click="editBannerHandle">
          <div class="img-content">
            <img :src="info.bannerImgs" alt="">
            <div class="shade" v-show="info.bannerImgs"></div>
          </div>
          <div class="banner-title"><div class="banner-title-content">{{info.title}}</div></div>
          <div class="banner-subhead"><div class="banner-subhead-content">{{info.subhead}}</div></div>
          <div class="banner-line"></div>
          <div class="banner-tip-wrapper" v-show="!info.bannerImgs">
            <div class="banner-tip-img">
              <img src="./img/edit.png" alt="" width="30" height="30">
            </div>
            <div class="banner-tip-text">编辑主标题/副标题</div>
          </div>
        </div>
        <EditBanner ref="editBanner" :info="info" @success="confirmBanner"></EditBanner>
        <!--概要-->
        <div class="abstract-wrapper">
          <div class="abstract-content" v-show="info.summary">
            <p v-html="info.summary"></p>
          </div>

          <div class="abstract-tip" v-show="!info.summary">文本摘要区域</div>
          <div class="abstract-shade">
            <el-button class="abstract-shade-btn" type="primary" @click="editAbstractHandle">编辑</el-button>
          </div>
        </div>
        <EditAbstract ref="editAbstract" :info="info" @success="confirmAbstract"></EditAbstract>
        <!--楼盘列表-->
        <div v-for="(house,ind) in info.devs" class="house-item">
          <div class="house-header">
            <div class="flag"></div>
            <span>楼盘{{chinaNum[ind]}}</span>
          </div>
          <div class="house-content">
            <dl>
              <dt>
                <img :src="house.imgUrl" alt="">
                <div class="ming" v-show="house.isTransparent==1">明房源</div>
              </dt>
              <dd class="house-info">
                <h2 class="house-title">{{house.devName}}</h2>
                <div class="tip1">
                  <div class="tip1-item">{{house.addressDistrict}}</div><em></em>
                  <div class="tip1-item">{{house.propertyType}}</div><em></em>
                  <div class="tip1-item">建面&nbsp;{{house.devSquareMetre}}m²</div>
                </div>
                <div class="tip2">
                  <div class="tip2-item" v-show="house.feature" v-for="bb in house.feature.split(',')">{{bb}}</div>
                </div>
                <div class="averPrice">{{house.averPrice}}元/㎡</div>
              </dd>
            </dl>
          </div>
          <div class="introduce-label">推荐理由</div>
          <div class="introduce-content">{{house.recommendReason}}</div>
          <div class="house-shade">
            <el-button class="house-edit" @click="editHouseHandle(house)">编辑</el-button>
            <el-button type="danger" class="house-delete" @click="deleteHouseHandle(house)">删除</el-button>
          </div>
        </div>
        <EditHouse ref="editHouse" :house="editHouse" @success="confirmHouse"></EditHouse>
        <div class="add-House" @click="addHouse"><img src="./img/plus.png" width="15" height="15" alt="">添加楼盘</div>
        <!--结束语-->
        <div class="the-end-wrapper">
          <div class="the-end-content" v-show="info.tag">
            <p v-html="info.tag"></p>
          </div>
          <div v-show="!info.tag" class="the-end-tip">结束语区域</div>
          <div class="the-end-shade">
            <el-button class="the-end-edit" type="primary" @click="editTheEndHandle">编辑</el-button>
          </div>
        </div>
        <EditTheEnd ref="editTheEnd" @success="confirmTheEnd" :info="info"></EditTheEnd>
        <!--免责申明-->
        <div class="disclaimer-wrapper" @click="editDisclaimer">
          <div class="disclaimer-content" v-show="info.disclaimer">
            <p v-html="info.disclaimer"></p>
          </div>
          <div class="disclaimer-tip" v-show="!info.disclaimer">
            <img src="./img/edit.png" width="14" height="14" alt="">编辑免责声明
          </div>
        </div>
        <EditDisclaimer ref="editDisclaimer" @success="confirmDisclaimer" :info="info"></EditDisclaimer>
      </div>
    </div>
    <div class="btn-group">
      <el-button type="primary" @click="saveHandle">保存</el-button>
      <el-button @click="cancelHandle">取消</el-button>
    </div>
  </div>
</template>

<script>
  import api from '@/api/apiPath'
  import EditBanner from './component/EditBanner'
  import EditAbstract from './component/EditAbstract'
  import EditHouse from './component/EditHouse'
  import EditTheEnd from './component/EditTheEnd'
  import EditDisclaimer from './component/EditDisclaimer'
  export default {
    name: "OperateThematicPage",
    components: {EditBanner, EditAbstract, EditHouse, EditTheEnd, EditDisclaimer},
    data () {
      return {
        chinaNum: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'],
        info: {
          title: '',
          subhead: '',
          bannerImgs: '',
          summary: '',
          devs: [],
          tag: '',
          disclaimer: '',
        },
        editHouse: null,
      }
    },
    created () {
      this.pageType = this.$route.query.type
      if (this.pageType === 'edit') {
        this.axios.get(api.THEMATICPAGEVIEW+'?id='+this.$route.query.id).then(res => {
          this.info = res.data.data
          this.info.summary = this.info.summary.replace(/\n/g,'<br/>')
          this.info.tag = this.info.tag.replace(/\n/g,'<br/>')
          this.info.devs.forEach((house,index) => {
            house.index = index
          })
        })
      }
    },
    methods: {
      editBannerHandle(){
        this.$refs.editBanner.show()
      },
      confirmBanner(val) {
        this.info.title = val.title
        this.info.subhead = val.subhead
        this.info.bannerImgs = val.banner
      },
      editAbstractHandle(){
        this.$refs.editAbstract.show()
      },
      confirmAbstract(val){
        val.abstract = val.abstract.replace(/\n/g,'<br/>')
        this.info.summary = val.abstract
      },
      editHouseHandle (val) {
        this.editHouse = val
        this.$refs.editHouse.show()
      },
      deleteHouseHandle(house){
        const index = this.info.devs.indexOf(house)
        if (index > -1) {
          this.info.devs.splice(index,1)
        }
      },
      confirmHouse (val) {
        console.log(val.index)
        if (val.index || val.index == 0) {// 编辑
          this.info.devs[val.index].cityId = val.cityId
          this.info.devs[val.index].devId = val.devId
          this.info.devs[val.index].recommendReason = val.recommendReason
          this.info.devs[val.index].devName = val.build.devName
          this.info.devs[val.index].feature = val.build.feature
          this.info.devs[val.index].averPrice = val.build.averPrice
          this.info.devs[val.index].imgUrl = val.imgUrl
          this.info.devs[val.index].addressDistrict = val.build.addressDistrict
          this.info.devs[val.index].propertyType = val.build.propertyType
          this.info.devs[val.index].devSquareMetre = val.build.devSquareMetre
        } else {
          let house = {}
          house.index = this.info.devs.length
          house.cityId = val.cityId
          house.devId = val.devId
          house.recommendReason = val.recommendReason
          house.devName = val.build.devName
          house.feature = val.build.feature
          house.averPrice = val.build.averPrice
          house.imgUrl = val.imgUrl
          house.addressDistrict = val.build.addressDistrict
          house.propertyType = val.build.propertyType
          house.devSquareMetre = val.build.devSquareMetre
          this.info.devs.push(house)
        }
      },
      addHouse(){
        this.$refs.editHouse.addShow()
      },
      editTheEndHandle () {
        this.$refs.editTheEnd.show()
      },
      confirmTheEnd(val){
        val.end = val.end.replace(/\n/g,'<br/>')
        this.info.tag = val.end
      },
      editDisclaimer(){
        this.$refs.editDisclaimer.show()
      },
      confirmDisclaimer(val){
        val.disclaimer = val.disclaimer.replace(/\n/g,'<br/>')
        this.info.disclaimer = val.disclaimer
      },
      saveHandle () {
        if (!this.info.title){
          this.$message.error('请编辑主标题/副标题')
          return
        }
        if (!this.info.summary){
          this.$message.error('请填写摘要')
          return
        }
        if (this.info.devs.length == 0){
          this.$message.error('请添加楼盘')
          return
        }
        let devIds = []
        this.info.devs.forEach(house => {
          devIds.push(house.devId)
        })
        let devIdsNoSame = Array.from(new Set(devIds))
        if (devIds.length>devIdsNoSame.length) {
          this.$message.error('楼盘不能重复，请检查')
          return
        }
        if (!this.info.tag){
          this.$message.error('请编辑结束语')
          return
        }
        if (!this.info.disclaimer){
          this.$message.error('请编辑免责声明')
          return
        }
        this.axios.post(api.THEMATICPAGESAVE, {...this.info}).then(res => {
          if (res.data.code == 200){
            this.$message.success('保存成功')
            this.$router.push({path: '/thematicPage'})
          } else {
            this.$message.error(res.data.msg)
          }
        })
      },
      cancelHandle () {
        this.$router.push({path: '/thematicPage'})
      }
    }
  }
</script>

<style lang="stylus">
  .operate-thematic{
    .operate-wrapper{
      .operate-page{
        margin: 0 auto;
        width: 450px;
        box-sizing: border-box;
        .banner-wrapper{
          height: 200px;
          position: relative;
          .img-content{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            overflow: hidden;
            img{
              width: 100%;
              height: auto;
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
            }
            .shade{
              position: absolute;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
              background: rgba(0,0,0,0.5);
            }
          }
          .banner-title{
            position: absolute;
            top: 80px;
            width: 100%;
            height: 30px;
            .banner-title-content{
              margin: 0 40px;
              height: 30px;
              line-height: 30px;
              font-size: 22px;
              color: #fff;
              font-weight: bold;
              text-align: center;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
          .banner-subhead{
            position: absolute;
            top: 122px;
            width: 100%;
            height: 20px;
            .banner-subhead-content{
              margin: 0 20px;
              height: 20px;
              line-height: 20px;
              font-size: 14px;
              color: #fff;
              text-align: center;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
          .banner-line{
            position: absolute;
            top: 148px;
            width: 20px;
            height: 3px;
            background: #fff;
            left: 50%;
            transform: translateX(-50%);
          }
          .banner-tip-wrapper{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 200px;
            box-sizing: border-box;
            text-align: center;
            border: 1px dashed #BBC3D3;
            border-radius: 5px;
            cursor: pointer;
            .banner-tip-img{
              margin-top: 60px;
              height: 30px;
              text-align: center;
            }
            .banner-tip-text{
              margin-top: 20px;
              text-align: center;
              color: #636D87;
              font-size: 22px;
            }
          }
        }
        .abstract-wrapper{
          position: relative;
          margin-top: 20px;
          min-height: 112px;
          font-size: 14px;
          line-height: 1.6;
          .abstract-content{
            padding: 20px;
            min-height: 112px;
            border: 1px solid #BBC3D3;
            box-sizing: border-box;
          }
          .abstract-tip{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 112px;
            line-height: 112px;
            border: 1px dashed #BBC3D3;
            box-sizing: border-box;
            border-radius: 5px;
            text-align: center;
          }
          .abstract-shade{
            display: none;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,0.5);
            .abstract-shade-btn{
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%)
            }
          }
          &:hover{
            .abstract-shade{
              display: block;
            }
          }
        }
        .house-item{
          margin-top: 20px;
          position: relative;
          background: #FEFEFD;
          border: 1px solid #BBC3D3;
          &:hover{
            .house-shade{
              display: block;
            }
          }
          .house-shade{
            display: none;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            .house-edit{
              position: absolute;
              left: 25%;
              top: 50%;
              transform: translateY(-50%)
            }
            .house-delete{
              position: absolute;
              left: 60%;
              top: 50%;
              transform: translateY(-50%)
            }
          }
          .house-header{
            margin: 19px;
            height: 28px;
            position: relative;
            .flag{
              position: absolute;
              bottom: 3px;
              width: 68px;
              height: 8px;
              background: #FFA600;
              left: 50%;
              transform: translateX(-50%);
            }
            span{
              position: absolute;
              font-size: 20px;
              line-height: 28px;
              top: 0;
              left: 50%;
              transform: translateX(-50%);
            }
          }
          .house-content{
            margin: 20px;
            padding: 18px 14px;
            box-sizing: border-box;
            background: #fff;
            box-shadow: 0 0 10px #FAF9F8;
            dl{
              margin: 0;
              display: flex;
              height: 90px;
              dt{
                flex: 0 0 120px;
                position: relative;
                img{
                  position: absolute;
                  width: 100%;
                  top: 50%;
                  left: 0;
                  transform: translateY(-50%)
                }
                .ming{
                  position: absolute;
                  left: 0;
                  top: 0;
                  width: 40px;
                  height: 14px;
                  line-height: 15px;
                  text-align: center;
                  background: #FFA600;
                  color: #fff;
                  font-size: 9px;
                  border-radius: 2px;
                }
              }
              .house-info{
                margin: 0;
                padding: 0;
                padding-left: 12px;
                flex:1;
                .house-title{
                  margin: 0;
                  line-height: 16px;
                  font-size: 16px;
                  font-weight: bold;
                }
                .tip1{
                  display: flex;
                  margin-top: 9px;
                  .tip1-item{
                    height: 12px;
                    line-height: 12px;
                    font-size: 12px;
                    color: #8B8B8B;
                    white-space: nowrap;
                  }
                  em{
                    width: 1px;
                    height: 12px;
                    margin: 0 6px;
                    background: #8B8B8B;
                  }
                }
                .tip2{
                  height: 16px;
                  margin-top: 9px;
                  .tip2-item{
                    display: inline-block;
                    margin-right: 6px;
                    padding: 0 3px;
                    text-align: center;
                    height: 16px;
                    line-height: 16px;
                    font-size: 12px;
                    background: #FFF3E6;
                    color: #FE964F;
                  }
                }
                .averPrice{
                  margin-top: 12px;
                  font-size: 16px;
                  color: #FF6800;
                }
              }
            }
          }
          .introduce-label{
            margin: 20px 20px 10px 20px;
            height: 22px;
            line-height: 22px;
            font-size: 16px;
          }
          .introduce-content{
            padding: 20px;
            padding-top: 0;
            font-size: 14px;
            color: #969696;
            line-height: 1.5;
          }
        }
        .add-House{
          margin: 20px auto;
          width: 450px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          border: 1px dashed #BBC3D3;
          border-radius: 5px;
          cursor: pointer;
          img{
            margin-right: 10px;
          }
        }
        .the-end-wrapper{
          position: relative;
          margin: 20px auto;
          font-size: 14px;
          min-height: 112px;
          line-height: 1.5;
          color: #555;
          .the-end-content{
            min-height: 112px;
            padding: 20px;
            border: 1px solid #BBC3D3;
            box-sizing: border-box;
          }
          .the-end-tip{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 112px;
            text-align: center;
            line-height: 112px;
            border: 1px dashed #BBC3D3;
            border-radius: 5px;
            box-sizing: border-box;
          }
          .the-end-shade{
            display: none;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,0.5);
            .the-end-edit{
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
            }
          }
          &:hover{
            .the-end-shade{
              display: block;
            }
          }
        }
        .disclaimer-wrapper{
          position: relative;
          min-height: 40px;
          font-size: 11px;
          line-height: 1.5;
          color: #7C7C7C;
          .disclaimer-content{
            min-height: 40px;
            padding: 20px;
            border: 1px solid #BBC3D3;
            box-sizing: border-box;
            p{
              margin: 0;
            }
          }
          .disclaimer-tip{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: 1px dashed #BBC3D3;
            border-radius: 5px;
            box-sizing: border-box;
            font-size: 14px;
            cursor: pointer;
            img{
              margin-right: 10px;
            }
          }
        }
      }
    }
    .btn-group{
      margin: 20px auto;
      width: 450px;
    }
  }
</style>
